<template>
	<view>
		<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<!-- {{i18n.index}} -->
				<view class="left" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="content">
					{{i18n.WalletTotalAssets}}
				</view>
				<view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="wall-head">
			<view class="item">
				<view>{{i18n.index_title}}（USDT）</view>
				<h2>$ {{total}}</h2>
			</view>
			<!-- <view class="item">
				<text>≈ {{total}} $</text>
			</view> -->
		</view>
		<view class="wall-content">
			<view class="wall-title">
				{{i18n.MainstreamCurrency}}
			</view>
			<template v-if="list.length">
				<block v-for="(item,index) in list" :key="index">
					<view class="wall-list" @tap.stop="jumpDetail(item)">
						<view class="item">
							<image :src="item.logo" mode="widthFix" lazy-load></image>
							<view class="item-left-txt">
								<view>
									{{item.title_en}}
								</view>
								<text>{{item.title_zh}}</text>
							</view>
						</view>
						<view class="item">
							<view class="item-right-txt">
								<view>
									{{item.balance}}
								</view>
								<text>≈ $ {{item.usd_price}}</text>
							</view>
							<uni-icon type="forward" color="#a5a5a5" size="25"></uni-icon>
						</view>
					</view>
				</block>
			</template>
			<template v-else>
				<view class="nodata">{{i18n.nodata}}</view>
			</template>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {mapGetters} from 'vuex';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,uniIcon
		},
		data() {
			return {
				total:'',
				list:[]
			};
		},
		onShow(){
			this.getWallList()
		},
		methods:{
			jumpDetail(item){
				uni.navigateTo({
					url:`/pages/wall/detail?item=${JSON.stringify(item)}`
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getWallList(){
				let _url = this.getRequestUrl+'/api/wallet/wallet_list';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				// uni.showLoading()
				this.showLoad = true;
				let result = fetch(_url, data, "POST");
				result.then(res=>{
					// uni.hideLoading()
					this.showLoad = false;
					if(res.data.code==1){
						this.list = res.data.data.list;
						this.total = res.data.data.total_usd;
						this.list.forEach((item,index)=>{
							this.list[index].type = (item.zdf>=0?true:false)
							this.list[index].zdfisshow = false;
							item.zdf = (item.zdf*100)+'%'
						})
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					// uni.hideLoading()
					this.showLoad = false;
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content{
			font-size: 37upx;
			text-align: center;
		}
	}
	.wall-head{
		padding: 50upx 72upx 60upx 30upx;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 20upx solid #D5DFEB;
		.item{
			color: #FFFFFF;
			view{
				font-size: 25upx;
			}
			h2{
				font-size: 45upx;
				font-weight: bold;
				margin-top: 41upx;
			}
			text{
				color: #D9E9FB;
				font-size: 24upx;
			}
		}
	}
	.wall-content{
		border-bottom: 1upx solid #f3f3f3;
		.nodata{
			text-align: center;
			padding: 60upx 0;
			color: #6A6A6A;
		}
		.wall-title{
			font-size: 29upx;
			font-weight: bold;
			color: #000000;
			padding: 32upx 30upx 0;
		}
		.wall-list{
			padding: 42upx 23upx 39upx 30upx;
			border-bottom: 1upx solid #dbdbdb;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child{
				border-bottom: none;
			}
			.item{
				display: flex;
				align-items: center;
				image{
					width: 60upx;
					height: 60upx;
					border-radius: 30upx;
					margin-right: 19upx;
				}
				.item-left-txt{
					view{
						color: #000000;
						font-size: 28upx;
						font-weight: bold;
					}
					text{
						color: #000000;
						font-size: 22upx;
					}
				}
				.item-right-txt{
					margin-right: 13upx;
					view{
						text-align: right;
						color: #000000;
						font-size: 28upx;
						font-weight: bold;
					}
					text{
						color: #000000;
						font-size: 22upx;
					}
				}
			}
		}
	}
</style>
